<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        .box1
        {
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div
        {
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            margin-left: 10px;
        }
        .box2
        {
            background-color: #bfa;
            /*
            设置box2的动画
            animation-name 要对当前元素生效的关键帧的名字
            */
            animation-name: test;
            /*
            animation-duration动画的执行时间
            */
            animation-duration: 2s;
            /*
            animation-delay动画的延时时间
            */
            animation-delay: 2s;
            /*
            animation-timing-function动画的执行方式
            */
            animation-timing-function: linear;
            /*
            animation-iteration-count动画执行的次数
            可选值
            infinite无限次数执行

            */
            animation-iteration-count: 1;
            /*
            animation-direction
            指定动画运行的方向
            normal 从from向to运行
            reverse 从to向from运行
            alternate 从from向to运行 重复执行时反向执行
            alternate-reverse 从to向from运行 重复时反向执行
            */
            /*animation-direction: alternate;*/
            /*
            animation-play-state
            设置动画的执行状态
            running 默认值 动画执行
            paused 动画停止

            */
            /*
            animation-fill-mode
            动画的填充模式 
            none 默认值 动画执行完毕元素回到初始原来的位置
            forwards 动画执行完毕元素会停止在动画结束的位置
            backwards 动画延迟等待时，元素就会处于开始位置
            both就是结合了上面两种效果
            */
            animation-fill-mode: both;
        }

        .box3
        {
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
        
        /*
        .box1:hover div
        {
            margin-left: 700px;
        }
        */
        /*
        动画
        动画和过渡类似，都是可以实现一些动态的效果
        不同的是过渡需要在某个属性发生变化时才会触发
        动画可以自动触发动态效果

        设置动画效果，必须先要设置一个关键帧
        关键帧设置了动画执行的每一个步骤
        */
        @keyframes test
        {
            /*
            from{}表示动画的开始位置 也可以使用0%
            */
            from
            {
                margin-left: 0px;
                background-color: orange;
            }
            /*
            to{}表示动画的结束位置 也可以使用100%
            */
            to
            {
                margin-left: 700px;
                background-color: red;
            }
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <!--<div class="box3"></div>-->
    </div>
</body>
</html>